<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>课程列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>


<table id="demo" lay-filter="test"></table>


<script src="/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','table'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,table = layui.table;

        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/demo/table/user/' //数据接口
            ,toolbar:'#barDemo1'
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'courseId', title: 'ID', width:60},
                {field: 'courseName', title: '课程名称', width:100},
                {field: 'courseTypeId', title: '课程类型', width:100},
                {field: 'tid', title: '主讲老师', width:100},
                {field: 'fitObj', title: '适合对象', width:100},
                {field: 'trnObj', title: '培养目标', width:100},
                {field: 'areaid', title: '市', width:60},
                {field: 'positionid', title: '详细地址', width:100},
                {field: 'gradeiId', title: '班级', width:60},
                {field: 'xkId', title: '学科', width:60},
                {field: 'xqId', title: '学期', width:60},
                {field: 'bcId', title: '班次', width:60},
                {field: 'courseState', title: '课程状态', width:100},
                {field: 'allNumber', title: '总人数', width:80},
                {field: 'gift', title: '礼物', width:60},
                {field: 'courseInfo', title: '课程详情', width:100},
                {field: 'createTime', title: '创建时间', width:100},
                {field: 'updateTime', title: '修改时间', width:100},
                ,{title: '操作', width: 165, sort: true,toolbar:'#barDemo'}
            ]]
        });


        //监听头事件
        table.on('toolbar(test)', function(obj){
            switch(obj.event){//obj.event获取每个按钮的对象，根据event的值判断事件
                case 'add':
                    layer.open({//打开一个iframe
                        type:2,
                        title:'添加员工',
                        area: ['500px', '600px'],
                        content: 'addCourse.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        end: function(){//窗口关闭回调函数
                            layer.msg("添加成功");
                            table.reload('tableTest', {//表格重载函数 参数是表格的id
                                url: '/test/queryAll.do'
                            });
                        }
                    })
                    break;
                case 'dels':
                    //获取选中状态  参数是容器id
                    var checkStatus = table.checkStatus('tableTest');
                    //获取选中数量的长度
                    var selectCount = checkStatus.data.length;
                    if(selectCount == 0){
                        layer.msg('批量删除至少选中一项数据',function(){});
                        return false;
                    }
                    layer.confirm('真的要删除选中的项吗？',function(index){//消息确认框
                        layer.close(index);//事件执行后进行关闭弹出的层
                        index = layer.load(1,[0.1,'#fff']);//加载层动画 返回一个值，用于关闭窗口
                        var isStr="";//参数
                        for(var i=0; i<selectCount; i++){
                            isStr = isStr + "," + checkStatus.data[i].id;
                        }
                        isStr=isStr.substring(1,isStr.length);
                        $.ajax({
                            type:'post',
                            data:{"ids":isStr},
                            url:'/test/dels.do',
                            success:function(data){
                                if(data.code==0){
                                    layer.msg("请重新选择");
                                }
                                table.reload('tableTest', {//表格重载
                                    url: '/test/queryAll.do'
                                    ,page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                                layer.close(index);//关闭加载层
                            },error:function(code){
                                //parent.layer.msg('操作失败!',{icon: 5,time:1000});
                            }
                        });
                    })
                    break;
            };
        });

        //监听行事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获取当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'edit'){ //修改
                layer.open({//打开一个iframe 但写的是服务，所以跳到服务
                    type:2, //类型
                    title:'修改员工',
                    area: ['500px', '600px'],//窗口的大小
                    content: '/employee/queryId.do?id='+data.id, //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    end: function(){ //窗口关闭回调函数
                        layer.msg("修改成功");
                        table.reload('tableTest', {
                            url: '/test/queryAll.do'
                        });
                    }
                })
            } else { //删除
                layer.confirm("确认删除吗?",function (index) {
                    layer.close(index);
                    index = layer.load(1,[0.1,'#fff']);//加载层动画
                    $.ajax({
                        url: "/employee/delete.do",//删除服务
                        type: "POST",
                        data:{"id":data.id},
                        dataType: "json",
                        success: function(data){
                            if(data.msg=='成功'){
                                table.reload('tableTest', {
                                    url: '/test/queryAll.do'
                                });
                            }
                            layer.close(index);//关闭加载层
                        }
                    });
                })
            }
        });
    });
</script>
<!--行级修改-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">
        <i class="layui-icon">&#xe642;</i> 修改
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe67e;</i> 删除
    </a>
</script>

<!--头部修改-->
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-bg-blue" lay-event="add" >
        <i class="layui-icon">&#xe608;</i> 添加
    </a>
    <a class="layui-btn" lay-event="dels" style="background-color:red">
        <i class="layui-icon">&#xe640;</i>删除
    </a>
</script>
</body>
</html>